<template>
  <div class="AI-compare-class clear">
    <div class="ai-top-banner AI-MAW">
      <div class="ai-choose-school" style="opacity: 0;visibility: hidden;">
        <template>
          <el-select v-model="schoolCode" placeholder="请选择学校" @change="getLesson">
            <el-option v-for="item in schoolData" :key="item.app_code" :label="item.name" :value="item.app_code">
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="ai-banner-btns">
        <el-button class="h_border_img">授课对比</el-button>
        <el-button class="no_border_img" @click="handleSelect">授课对比报告</el-button>
        <router-view />
      </div>
    </div>
    <div class="AI-MAW">
      <div class="compare-class-l fl">
        <div class="compare-class-box ai_b_s">
          <div class="compare-class-info">
            <div class="class-info-tit clear">
              <span class="fl">授课信息</span>
              <el-button class="fr" size="medium" type="primary" @click="compare_lessons">对比分析</el-button>
            </div>
            <div class="search-box">
              <el-input placeholder="搜索课程" v-model="searchClass" @keyup.enter.native="getLessonClick">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getLessonClick"></i>
              </el-input>
              <el-button type="primary" @click="resetSearch">重置</el-button>
            </div>
          </div>
          <div class="compare-class-checked">
            <span class="c-tit">已选</span>
            <ul>
              <li class="clear" v-for="(item, index) of checked_lessons" :key="index">
                <p :title="item.name">{{ item.name }}</p>
                <i class="el-icon-close fr" @click="close_lesson(item.id)"></i>
              </li>
              <div class="emptyTips" v-show="checked_lessons.length == 0">您还没选中需要对比的课程</div>
            </ul>
          </div>
          <div class="compare-class-uncheck">
            <span class="c-tit">可选</span>
            <table class="c-uncheck-table">
              <tr>
                <th>课程</th>
                <th>选项</th>
              </tr>
              <tr v-for="(item, index) of classData" :key="index">
                <td :title="item.course_date + item.name">{{ item.course_date }} {{ item.name }}</td>
                <td>
                  <el-checkbox v-model="item.checked" @change="check_lesson(index, item.id)"></el-checkbox>
                </td>
              </tr>
              <tr v-show="classData.length == 0">
                <td class="noDataTips" colspan="3">暂时没有发现数据</td>
              </tr>
            </table>
          </div>
          <div class="compare-class-pageBox">
            <el-pagination background v-if="total_number > page_size" @current-change="change_page" :pager-count="5"
              :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="compare-class-r fl">
        <div class="compare-r-c1">
          <div class="c-playback ai_b_s">
            <span class="c-tit">视频回看</span>
            <div class="c-videos-box clear">
              <div class="c-video1 fl">
                <div v-if="showVideoPlayer == false" class="c-placeholder"></div>
                <hjPlayer v-if="showVideoPlayer == true" id="classPlayer1" :playerOption.sync="playerOption1">
                </hjPlayer>
                <span class="c-video-tit">{{ lessonName1 }}</span>
              </div>
              <div class="c-video2 fl">
                <div v-if="showVideoPlayer2 == false" class="c-placeholder"></div>
                <hjPlayer v-if="showVideoPlayer2 == true" id="classPlayer2" :playerOption.sync="playerOption2">
                </hjPlayer>
                <span class="c-video-tit">{{ lessonName2 }}</span>
              </div>
            </div>
          </div>
          <div class="c-teacher-action ai_b_s">
            <span class="c-tit">教师行为分析</span>
            <div id="teacher_action_map" style="width: 100%;height:96%;"></div>
          </div>
        </div>
        <div class="compare-r-c2">
          <div class="c-teaching-model ai_b_s clear">
            <div class="teaching-model-btns fl">
              <el-button :class="modelVisible == true ? 'active' : ''" @click="modelRateClick(1)">教学模型</el-button>
              <el-button :class="modelVisible == true ? '' : 'active'" @click="modelRateClick(2)">分析结果</el-button>
            </div>
            <div v-show="modelVisible == true" class="excharts-box fl">
              <div id="teaching_model_map1" style="width: 50%;height:100%;"></div>
              <div id="teaching_model_map2" style="width: 50%;height:100%;"></div>
            </div>
            <div v-show="modelVisible == false" class="excharts-box fl">
              <div class="lesson-rate">
                <table>
                  <tr>
                    <th>教学模式</th>
                    <th>练习型</th>
                    <th>混合型</th>
                    <th>对话型</th>
                    <th>讲授型</th>
                  </tr>
                  <tr>
                    <td>判断标准</td>
                    <td>Rt &le;0.3
                    </td>
                    <td>Rt &ge;0.7
                    </td>
                    <td>Ch &ge;0.4
                    </td>
                    <td> 0.3 &lt;Rt&le; 0.7,Ch&lt;0.4 </td>
                  </tr>
                </table>

                <table class="result-table">
                  <tr>
                    <td>{{ lessonName1 }}</td>
                    <td>
                      <div id="rate-map1" style="display: inline-block;width: 150px;height: 100px;"></div>
                    </td>
                    <td>
                      <div id="action-change-map1" style="display: inline-block;width: 150px;height: 100px;"></div>
                    </td>
                    <td>
                      <div class="model-type" v-if="LessonModel1.ModelType != undefined">
                        {{ ModelTypeData[LessonModel1.ModelType - 1] }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td>{{ lessonName2 }}</td>
                    <td>
                      <div id="rate-map2" style="display: inline-block;width: 150px;height: 100px;"></div>
                    </td>
                    <td>
                      <div id="action-change-map2" style="display: inline-block;width: 150px;height: 100px;"></div>
                    </td>
                    <td>
                      <div class="model-type" v-if="LessonModel2.ModelType != undefined">
                        {{ ModelTypeData[LessonModel2.ModelType - 1] }}</div>
                    </td>
                  </tr>
                </table>

              </div>
            </div>
          </div>
          <div class="c-student-join ai_b_s">
            <span class="c-tit">学生参与度</span>
            <div id="student_join_map" style="width: 100%;height:96%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
   
<script>
import hjPlayer from "../../common/hjPlayer";

const echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/map");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  components: {
    hjPlayer,
  },
  data() {
    return {
      page_index: 1,
      page_size: 10,
      total_number: 0,
      // 搜索学校
      schoolData: [],
      schoolCode: "00000000000000000000000000000000",
      searchClass: "",
      classData: [],
      default_class_data: [],
      checked_lessons: [],
      lessonName1: null,
      lessonName2: null,
      teacher1: {},
      teacher2: {},
      ModelTypeData: ["练习型", "混合型", "对话型", "讲授型"],
      AvgJoinDegree1: [],
      AvgJoinDegree2: [],
      LessonModel1: {},
      LessonModel2: {},
      Conclusion1: "",
      Conclusion2: "",
      Timestamp1: [],
      Timestamp2: [],
      modelVisible: true,
      // 视频1\2：
      showVideoPlayer: false,
      playerOption1: {
        type: 'm3u8',
        url: '',
      },
      showVideoPlayer2: false,
      playerOption2: {
        type: 'm3u8',
        url: '',
      },
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null
    };
  },
  created() {
    this.getSchool();
    this.getLesson(); //学校（单级时）页面加载就获取课程信息
    this.init();
  },
  mounted() {
    // 页面刷新时，数据回显
    let schoolCode = sessionStorage.getItem("schoolCode");
    if (schoolCode != undefined) {
      this.schoolCode = schoolCode;
      this.getLesson();
    }

    // 教师行为分析雷达图
    this.teacher_action_map();
    // 教学模型图
    this.teaching_model_map1();
    this.teaching_model_map2();
    // 学生参与度图
    this.student_join_map();
    this.init();
  },
  methods: {
    checkSelect(lesson_id) {
      var check_lesson_id = getOneColumn(this.checked_lessons, 'id');
      if (in_array(lesson_id, check_lesson_id)) {
        return true;
      }
      return false;
    },
    // 按钮：教学模型/课程评价
    modelRateClick(type) {
      // type==1?(this.modelVisible=true):(this.modelVisible=false);
      if (type == 2 && this.checked_lessons.length == 0) {
        //选择2课程才能点击课程评价按钮
        this.$message.warning("请先选择两个课程哦~");
        return false;
      }
      if (type == 1) {
        this.modelVisible = true;
        this.compare_lessons(); //此处解决bug：点击课程评价按钮--》重新选择2个课程--》点击对比分析按钮--》点击教学模型按钮：会出现教学模型的图不能自适应的情况
      } else {
        this.modelVisible = false;
      }
    },
    // 获取学校数据
    getSchool() {
      let success = res => {
        this.schoolData = res.data;
      };
      this.$ajax({
        url: "api/ai/school_list",
        method: "get",
        params: {},
        func: { success: success }
      });
    },
    // 搜索课程，搜索框
    getLessonClick() {
      this.page_index = 1;
      this.getLesson();
    },
    // 重置搜索框
    resetSearch() {
      this.searchClass = "";
      this.getLesson();
    },
    //根据学校id获取该学校的课程
    getLesson() {
      let success = res => {
        this.total_number = res.data.total_number;
        this.classData = res.data.data;
        for (var i = 0; i < this.classData.length; i++) {
          this.classData[i].checked = this.checkSelect(this.classData[i].id);
        }
        sessionStorage.setItem("schoolCode", deep_clone(this.schoolCode));
      };
      this.$ajax({
        url: "api/ai/course_list",
        method: "get",
        params: {
          app_code: this.schoolCode,
          keyword: this.searchClass,
          page_index: this.page_index,
          page_size: this.page_size
        },
        func: { success: success }
      });
    },
    change_page(val) {
      this.page_index = val;
      this.getLesson();
    },

    // 选中想对比的课程
    check_lesson(inx) {
      var inxe = getOneColumn(this.checked_lessons, "id").indexOf(this.classData[inx].id);
      if (inxe > -1) {
        this.classData[inx].checked = false;
        this.checked_lessons.splice(inxe, 1);
      } else {
        if (this.checked_lessons.length >= 2) {
          this.classData[inx].checked = false;
          this.$message.warning("已选2个课程，不能再选哦~")
        } else {
          this.classData[inx].checked = true;
          let pushData = deep_clone(this.classData[inx]);
          pushData.lessonInfoInx = inx;
          this.checked_lessons.push(pushData);
        }

      }
    },

    //取消已选中的
    close_lesson(_id) {
      // 根据课程id取消课程列表里的选中状态（checkbox的）
      if (this.classData.length != 0) {
        for (let i = 0; i < this.classData.length; i++) {
          if (this.classData[i].id == _id) {
            this.classData[i].checked = false;
          }
        }
      }
      // 删除已选的
      for (let j = 0; j < this.checked_lessons.length; j++) {
        if (this.checked_lessons[j].id == _id) {
          this.checked_lessons.splice(j, 1);
        }
      }
    },
    compare_lessons() {
      if (this.checked_lessons.length != 2) {
        this.$message.warning("只能选择2个课程进行对比哦~");
        return false;
      }
      //选中视频后，先把之前的视频流清空：
      this.showVideoPlayer = false;
      this.playerOption1.url = "";
      this.showVideoPlayer2 = false;
      this.playerOption2.url = "";
      //缓存选中的视频，用于刷新页面后的回显，或者跳去对比报告页面后数据的展示
      sessionStorage.setItem(
        "checked_lessons",
        JSON.stringify(deep_clone(this.checked_lessons))
      );
      // 获取视频名字：
      let checked_lessons = this.checked_lessons;
      this.lessonName1 = checked_lessons[0].name;
      this.lessonName2 = checked_lessons[1].name;
      //更改视频流地址：
      this.$nextTick(() => {
        this.showVideoPlayer = true;
        this.playerOption1.url = checked_lessons[0].url;
        this.showVideoPlayer2 = true;
        this.playerOption2.url = checked_lessons[1].url;
      })

      // 通过对应课程ID分别获取2课程的数据：
      this.getLessonData(0, checked_lessons[0].LessonID);
      this.getLessonData(1, checked_lessons[1].LessonID);
    },
    getLessonData(_num, _lessonId) {
      let success = res => {
        if (_num == 0) {
          this.teacher1 = res.data.BehaviorRecord.Tch;
          this.AvgJoinDegree1 = res.data.StuAvailableScore.AvgJoinDegree;
          this.Timestamp1 = res.data.StuAvailableScore.Timestamp;
          this.LessonModel1 = res.data.LessonModel;
          this.Conclusion1 = res.data.BehaviorRecord.Conclusion;
          sessionStorage.setItem(
            "lesson1",
            JSON.stringify(deep_clone(res.data))
          );
        } else {
          this.teacher2 = res.data.BehaviorRecord.Tch;
          this.AvgJoinDegree2 = res.data.StuAvailableScore.AvgJoinDegree;
          this.Timestamp2 = res.data.StuAvailableScore.Timestamp;
          this.LessonModel2 = res.data.LessonModel;
          this.Conclusion2 = res.data.BehaviorRecord.Conclusion;
          sessionStorage.setItem(
            "lesson2",
            JSON.stringify(deep_clone(res.data))
          );
        }
        //老师行为分析
        this.teacher_action_map();
        // 教学模型图
        this.teaching_model_map1();
        this.teaching_model_map2();
        // 学生参与度图
        this.student_join_map();
        // 评价
        this.rate_map();
        this.action_change_map();
      };
      this.$ajax({
        url: "api/ai/course_info",
        method: "get",
        params: {
          LessonID: _lessonId
        },
        func: { success: success }
      });
    },
    // echarts自适应初始化
    init() {
      window.addEventListener("resize", () => {
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
        this.myChart4.resize();
      });
    },

    teacher_action_map() {
      let _value1 = [
        this.teacher1.Moving == undefined ? 0 : this.teacher1.Moving.toFixed(2),
        this.teacher1.StandOn == undefined
          ? 0
          : this.teacher1.StandOn.toFixed(2),
        this.teacher1.DownPlatform == undefined
          ? 0
          : this.teacher1.DownPlatform.toFixed(2),
        this.teacher1.BlackBoard == undefined
          ? 0
          : this.teacher1.BlackBoard.toFixed(2)
      ];
      let _value2 = [
        this.teacher2.Moving == undefined ? 0 : this.teacher2.Moving.toFixed(2),
        this.teacher2.StandOn == undefined
          ? 0
          : this.teacher2.StandOn.toFixed(2),
        this.teacher2.DownPlatform == undefined
          ? 0
          : this.teacher2.DownPlatform.toFixed(2),
        this.teacher2.BlackBoard == undefined
          ? 0
          : this.teacher2.BlackBoard.toFixed(2)
      ];
      let _value = deep_clone(_value1).concat(deep_clone(_value2));
      let maxVal =
        Math.max.apply(null, _value) == 0 ? 100 : Math.max.apply(null, _value); //雷达图最大值
      this.myChart1 = echarts.init(
        document.getElementById("teacher_action_map")
      );
      this.myChart1.setOption({
        grid: {
          // left: "20%",
          // right: "20%",
          // bottom: "10%",
          // containLabel: true
        },
        color: ["#FEA900", "#22D7FF"],
        legend: {
          show: true,
          bottom: 10,
          center: 0,
          // itemWidth:25, // 图例标记的图形宽度。[ default: 25 ]
          // itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
          // itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 14,
            color: "#fff"
          },
          data: [this.lessonName1, this.lessonName2]
        },
        tooltip: {
          trigger: "item"
        },
        radar: [
          {
            indicator: [
              {
                text: "走动讲课",
                max: maxVal
              },
              {
                text: "站立授课",
                max: maxVal
              },
              {
                text: "下讲台授课",
                max: maxVal
              },
              {
                text: "板书",
                max: maxVal
              }
            ],
            textStyle: {
              color: "red"
            },
            center: ["55%", "45%"],
            radius: 110, //雷达图的大小
            startAngle: 90,
            splitNumber: 3,
            orient: "horizontal", // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
            name: {
              formatter: "{value}",
              textStyle: {
                fontSize: 14, //外圈标签字体大小
                color: "#fff" //外圈标签字体颜色
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["transparent", "transparent"] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              }
            },
            axisLine: {
              //指向外圈文本的分隔线样式
              lineStyle: {
                color: "#2f548d"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#2f548d", // 分隔线颜色
                width: 1 // 分隔线线宽
              }
            }
          }
        ],
        series: [
          {
            name: "教师行为分析",
            type: "radar",
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                name: this.lessonName1,
                value: _value1,
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: "#FEA900"
                  }
                },
                symbolSize: 0, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                label: {
                  // 单个拐点文本的样式设置
                  normal: {
                    show: true, // 单个拐点文本的样式设置。[ default: false ]
                    position: "top", // 标签的位置。[ default: top ]
                    distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                    color: "#6692e2", // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                    fontSize: 14, // 文字的字体大小
                    formatter: function(params) {
                      return params.value;
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    //图形悬浮效果
                    borderColor: "#f9cf67",
                    borderWidth: 2.5
                  }
                }
              },
              {
                name: this.lessonName2,
                value: _value2,
                symbolSize: 0,
                itemStyle: {
                  normal: {
                    borderColor: "#00c2ff",
                    borderWidth: 2.5
                  }
                },
                areaStyle: {
                  normal: {
                    color: "#22D7FF"
                  }
                }
              }
            ]
          }
        ]
      });
      this.myChart1.resize();
    },
    teaching_model_map1() {
      this.myChart2 = echarts.init(
        document.getElementById("teaching_model_map1")
      );
      let show_data1 =
        this.LessonModel1.ST_Value == undefined
          ? []
          : this.LessonModel1.ST_Value;
      let show_data2 =
        this.LessonModel2.ST_Value == undefined
          ? []
          : this.LessonModel2.ST_Value;
      let _max1 = show_data1[show_data1.length - 1];
      let _max2 = show_data2[show_data2.length - 1];
      let _max = _max1 >= _max2 ? _max1 : _max2;
      let x_value = [];
      for (var i = 0; i < _max; i++) {
        x_value.push(i);
      }
      this.myChart2.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          name: "T",
          nameLocation: "end",
          type: "category",
          boundaryGap: false,
          splitNumber: 5,
          max: _max,
          min: 0,
          data: x_value,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          }
        },
        yAxis: {
          name: "S",
          nameLocation: "end",
          max: _max,
          splitNumber: 5,
          min: 0,
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          }
        },
        series: [
          {
            name: this.lessonName1 + "的S-T曲线",
            type: "line",
            step: "end",
            lineStyle: {
              color: "#FFD402"
            },
            itemStyle: {
              color: "#FFD402",
              borderWidth: 1,
              borderColor: "#FFD402"
            },
            data: show_data1
          },
          {
            name: this.lessonName2 + "的S-T曲线",
            type: "line",
            step: "end",
            lineStyle: {
              color: "#3DE2FF"
            },
            itemStyle: {
              color: "#3DE2FF",
              borderWidth: 1,
              borderColor: "#3DE2FF"
            },
            data: show_data2
          }
        ]
      });
      this.myChart2.resize();
    },
    teaching_model_map2() {
      this.myChart3 = echarts.init(
        document.getElementById("teaching_model_map2")
      );
      this.myChart3.setOption({
        tooltip: {
          trigger: "item", //触发：散点类用item，柱形之类的坐标轴触发用axis。trigger：item对应type：scatter/effectScatter；trigger：axis对应type：line
          axisPointer: {
            type: "effectScatter" //这里只有hover在辐射点之上才触发
          },
          formatter: function(param) {
            //显示框自定义
            return (
              '<p style="display:flex;justify-content:space-between"><span>CH值 :</span> ' +
              "<span>" +
              param.data[1].toFixed(2) +
              "</span>" +
              "</p>" +
              '<p style="display:flex;justify-content:space-between"><span>RT值 :</span> ' +
              "<span>" +
              param.data[0].toFixed(2) +
              "</span>" +
              "</p>"
            );
          }
        },
        xAxis: {
          name: "RT",
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          //隐藏方格线
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "CH",
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          // 提示点
          {
            type: "effectScatter",
            symbolSize: 8,
            data: [[this.LessonModel1.Rt, this.LessonModel1.Ch]],
            color: "#FEA900"
          },
          {
            type: "effectScatter",
            symbolSize: 8,
            data: [[this.LessonModel2.Rt, this.LessonModel2.Ch]],
            color: "#22D7FF"
          },
          //线
          {
            data: [[0, 0], [0.5, 1], [1, 0]],
            type: "line",
            symbol: "none", // 去掉线的拐点
            color: "#979797"
          },
          {
            data: [[0.2, 0.4], [0.8, 0.4]],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          {
            data: [[0.3, 0], [0.3, 0.6]],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          {
            data: [[0.7, 0], [0.7, 0.6]],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          // 标注文字
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.6]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["对话型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.13, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["练习型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["混合型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.74, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["讲授型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#fff"
              }
            }
          }
        ]
      });
      this.myChart3.resize();
    },
    rate_map() {
      let myChart1 = echarts.init(document.getElementById("rate-map1"));
      let myChart2 = echarts.init(document.getElementById("rate-map2"));
      myChart1.setOption({
        color: ["#3C5F95", "#FFD402"],
        series: [
          {
            type: "pie",
            hoverAnimation: false,//取消hover放大效果
            radius: "85%",
            center: ["50%", "50%"],
            data: [
              {
                value: Math.round(this.LessonModel1.StuRate * 100),
                name: "学生行为"
              },
              {
                value: Math.round((1 - this.LessonModel1.StuRate) * 100),
                name: "教师行为"
              }
            ],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false //去掉引线
                },
                label: {
                  show: true,
                  position: "inside", //文字定位在饼图里面
                  formatter: "{c}% \n {b}", //这里添加\n让文字分行
                  textStyle: {
                    fontSize: 12,
                    color: "#fff"
                  }
                }
              }
            }
          }
        ]
      });
      myChart2.setOption({
        color: ["#3C5F95", "#3DE2FF"],
        series: [
          {
            type: "pie",
            hoverAnimation: false,//取消hover放大效果
            radius: "85%",
            center: ["50%", "50%"],
            data: [
              {
                value: Math.round(this.LessonModel2.StuRate * 100),
                name: "学生行为"
              },
              {
                value: Math.round((1 - this.LessonModel2.StuRate) * 100),
                name: "教师行为"
              }
            ],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false //去掉引线
                },
                label: {
                  show: true,
                  position: "inside", //文字定位在饼图里面
                  formatter: "{c}% \n {b}",
                  textStyle: {
                    fontSize: 12,
                    color: "#fff"
                  }
                }
              }
            }
          }
        ]
      });
    },
    action_change_map() {
      let myChart1 = echarts.init(
        document.getElementById("action-change-map1")
      );
      let myChart2 = echarts.init(
        document.getElementById("action-change-map2")
      );
      myChart1.setOption({
        title: {
          text: Math.round(this.LessonModel1.Ch * 100) + "%",
          subtext: "行为转化率",
          x: "center",
          y: "25%",
          textStyle: {
            color: "#FFD402",
            fontSize: 12
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [
          {
            type: "pie",
            hoverAnimation: false,//取消hover放大效果
            radius: ["65%", "85%"],
            color: ["#FFD402", "#3C5F95"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              { value: this.LessonModel1.Ch },
              { value: 1 - this.LessonModel1.Ch }
            ]
          }
        ]
      });
      myChart2.setOption({
        title: {
          text: Math.round(this.LessonModel2.Ch * 100) + "%",
          subtext: "行为转化率",
          x: "center",
          y: "25%",
          textStyle: {
            color: "#3DE2FF",
            fontSize: 12
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [
          {
            type: "pie",
            hoverAnimation: false,//取消hover放大效果
            radius: ["65%", "85%"],
            color: ["#3DE2FF", "#3C5F95"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },

            data: [
              { value: this.LessonModel2.Ch },
              { value: 1 - this.LessonModel2.Ch }
            ]
          }
        ]
      });
    },
    student_join_map() {
      this.myChart4 = echarts.init(document.getElementById("student_join_map"));
      this.myChart4.setOption({
        legend: {
          show: true,
          bottom: 0,
          center: 0,
          textStyle: {
            fontSize: 14,
            color: "#fff"
          },
          data: [this.lessonName1, this.lessonName2]
        },
        tooltip: {
          trigger: "axis",
          label: {
            show: true
          }
        },
        xAxis: {
          name: "时间/s",
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          data:
            this.Timestamp1.length >= this.Timestamp2.length
              ? this.Timestamp1
              : this.Timestamp2
        },
        yAxis: {
          name: "参与度/%",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#3C5F95"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          },
          max: 100
        },
        series: [
          {
            name: this.lessonName1,
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            symbolSize: 7,
            lineStyle: {
              color: "#FFD402"
            },
            itemStyle: {
              color: "#FFD402",
              borderWidth: 1,
              borderColor: "#FFD402"
            },
            data: this.AvgJoinDegree1
          },
          {
            name: this.lessonName2,
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            symbolSize: 7,
            lineStyle: {
              color: "#3DE2FF"
            },
            itemStyle: {
              color: "#3DE2FF",
              borderWidth: 1,
              borderColor: "#3DE2FF"
            },
            data: this.AvgJoinDegree2
          }
        ]
      });
      this.myChart4.resize();
    },
    handleSelect() {
      if (this.checked_lessons.length == 0) {
        this.$message.warning("请先选择两个课程,再查看对比报告哦~");
      } else {
        this.$router.push({
          name: "compare-report",
          params: this.checked_lessons
        });
      }
    }
  }
};
</script>
<style lang="scss"></style>

